<template>
  <div class="w-full h-32 pl-10 pr-10">
    <CollapseContainer class="mt-5" title="效果展示">
      <!-- @click 直接绑定 useDrawer 暴露的方法即可。如果想做一些额外的逻辑，可以再套一层方法 -->
      <a-button type="primary" class="mt-4 mb-4" @click="openDrawer"> 详情抽屉 </a-button>

      <!-- 任意位置，引入弹窗组件 -->
      <DrawerDetail @register="register" />

      <div>
        <p>适用场景: 详情页展示 </p>
        <p>关闭方式：(1) 点击遮罩层 (2) 点击左上角 x (3) 点击内部关闭按钮 </p>
      </div>
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';

  // 自定义 modal 组件
  import DrawerDetail from './DrawerDetail.vue';

  // vben modal 组件
  import { useDrawer } from '@/components/Drawer';

  // register 绑定 modal 组件, openModal 方法用于显示弹窗
  const [register, { openDrawer }] = useDrawer();

</script>

<script lang="ts">
  function getDoc() {
    return `


#### 父组件

\`\`\`html
\<template\>
    <!-- @click 直接绑定 useDrawer 暴露的方法即可。如果想做一些额外的逻辑，可以再套一层方法 -->
    <a-button type="primary" class="mt-4 mb-4" @click="openDrawer"> 详情页抽屉 </a-button>

    <!-- 任意位置，引入弹窗组件 -->
    <DrawerDetail @register="register" />
\</template\>

\<script lang="ts" setup\>
  // 自定义 modal 组件
  import DrawerDetail from './DrawerDetail.vue';

  // vben modal 组件
  import { useDrawer } from '@/components/Drawer';

  // register 绑定 modal 组件, openModal 方法用于显示弹窗
  const [register, { openDrawer }] = useDrawer();
\</script\>

\`\`\`

### DrawerDetail 组件
\`\`\`html

<template>
  <!-- 子组件必须添加 v-bind="$attrs",  通过父传孙的方式传递给 antd 的原生组件中 -->
  <BasicDrawer v-bind="$attrs" @register="register" title="简单抽屉" width="30%">
    <p>关闭方式: (1) 点击遮罩层 (2) 点击左上角 x (3) 点击内部关闭按钮 </p>
    <p>适用场景: 详情展示 </p>

    <!-- 按钮关闭，直接绑定 useDrawerInner 暴露的 closeDrawer 方法 -->
    <a-button type="primary" @click="closeDrawer" class="mr-2"> 按钮关闭 </a-button>
    <!-- 代码关闭, 包装一层方法   -->
    <label @click="doClose">点我关闭</label>
  </BasicDrawer>
</template>

\<script lang="ts" setup\>
// BasicModal 和 useModalInner 为 vben 基于 ant Modal 封装的组件
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';

  // register 绑定组件, closeModal: 关闭弹窗, setModalProps: 设置窗口参数
  const [register, { closeDrawer }] = useDrawerInner();

  function doClose() {
    // 手动调用关闭弹窗方法
    closeDrawer();
  }
\</script\>
\`\`\`


`;
  }
</script>
